<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  setup() {
    let router = useRouter();
    // 返回上一页
    let back = () => {
      router.go(-1);
    };
    let flag = ref(false);
    let i = ref(null);
    let pay = [
      {
        book: 100,
        price: 1,
      },
      {
        book: 600,
        price: 6,
      },
      {
        book: 1200,
        price: 12,
      },
      {
        book: 3000,
        price: 30,
      },
      {
        book: 5000,
        price: 50,
      },
      {
        book: 20000,
        price: 200,
      },
    ];

    let recharge = (index) => {
      i.value = pay[index].book;
      flag.value = true;
    };
    let onconfirm = () => {
      let userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
      if (!userinfo.foxBean) {
        userinfo.foxBean = i.value;
        window.localStorage.setItem("userinfo", JSON.stringify(userinfo));
      } else {
        let num = parseInt(userinfo.foxBean) + parseInt(i.value);
        userinfo.foxBean = num;
        window.localStorage.setItem("userinfo", JSON.stringify(userinfo));
      }
      Toast.loading({
        message: "加载中...",
        duration: 500,
        forbidClick: true,
        onClose: () => {
          Toast.success("操作成功");
        },
      });
    };

    return {
      back,
      pay,
      flag,
      recharge,
      onconfirm,
      i,
      // golds
    };
  },
};
</script>

<template>
  <div class="Recharge">
    <van-sticky>
      <div class="top">
        <span class="iconfont icon-xiangzuo1" @click="back"></span>
        <p>充值</p>
        <span class="iconfont icon-xiangzuo1" style="opacity: 0"></span>
      </div>
    </van-sticky>

    <div class="bottom_box">
      <div class="tops">
        <p class="play">请选择金额</p>
        <p class="num">1元=100狐豆</p>
      </div>
      <ul class="ul">
        <li v-for="(item, index) in pay" :key="index">
          <p>{{ item.book }}狐豆</p>
          <p>￥{{ item.price }} <span @click="recharge(index)">充值</span></p>
        </li>
      </ul>
    </div>

    <div class="bottom">
      <h1>温馨提示</h1>
      <p>
        1.充值过程可能会有延迟到账的情况，如果长时间未到账，请从"我的"
        "意见反馈" 里进行反馈，客服人员会进行处理。
      </p>
      <p>2.本页面显示的赠送豆卷，为相应充值方式的最高金额赠送数量。</p>
    </div>

    <van-dialog
      v-model:show="flag"
      :title="'确认充值' + i + '狐豆?'"
      @confirm="onconfirm"
      show-cancel-button
    >
    </van-dialog>
  </div>
</template>

<style lang="scss" scoped>
.Recharge {
  width: 100%;
  min-width: 375px;
  max-width: 750px;
  box-sizing: border-box;
  .top {
    display: flex;
    width: 100%;
    padding: 0 16px;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    background-color: #fff;
    box-sizing: border-box;
    .icon-xiangzuo1 {
      font-size: 22px;
      color: #b1b1b1;
    }
    p {
      color: #3d3d3d;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .bottom_box {
    margin-top: 20px;
    padding: 0 20px;
    .tops {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .play {
        font-size: 18px;
      }
      .num {
        font-size: 13px;
        color: #999999;
      }
    }
    .ul {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 58px;
        border-bottom: 1px solid #f6f6f6;
        p {
          &:nth-child(1) {
            font-size: 16px;
          }
          &:nth-child(2) {
            font-size: 16px;
            display: flex;
            align-items: center;
            span {
              display: flex;
              height: 26px;
              line-height: 26px;
              padding: 0 12px;
              text-align: center;
              background-color: #cca985;
              color: #fff;
              font-size: 13px;
              border-radius: 6px;
              margin-left: 6px;
            }
          }
        }
      }
    }
  }
  .bottom {
    margin-top: 20px;
    padding: 0 20px;
    h1 {
      font-size: 18px;
    }
    p {
      margin-top: 14px;
      line-height: 22px;
      font-size: 13px;
      color: #999999;
    }
  }
}
</style>